<template>
	<div class="my_page layer">
		<div class="my_page_cont">
			<div class="card_box">
				<div class="header_box">
					<img :src="userInfo.avatar" />
				</div>
				<div class="user_info">
					<div class="name">{{userInfo.nickname}}</div>
					<div class="id">
						ID:{{userInfo.uuid}}
						<img src="@/assets/images/my/copy.png" class="copy"
							@click="$utils.copy(userInfo.uuid);$toast.success($t('success'))" />
					</div>
				</div>
				<div class="more" @click="$router.push('/userInfo')"></div>
			</div>
			<div class="cell_box">
				<van-cell :title="$t('my.share')" is-link to="share" />
				<van-cell :title="$t('home.addressBook')" is-link to="addressBook" />
				<van-cell :title="$t('my.securitySetting')" is-link to="securitySetting" />
				<van-cell :title="$t('my.languageSettings')" is-link to="language" />
				<van-cell :title="$t('my.invoicingCurrency')" is-link to="pricingUnit" />
			</div>
			<div class="cell_box">
				<van-cell :title="$t('my.aboutUs')" is-link to="aboutUs" />
				<!-- <van-cell :title="$t('home.addressBook')" is-link /> -->
			</div>
			<el-button class="submit_but" @click="submit">{{$t('my.signOut')}}</el-button>
		</div>
		<Nav />
	</div>
</template>

<script>
	import Cookie from 'vue-cookies'
	import {
		userLogout
	} from '@/api/my.js'
	export default {
		name: 'MyPage',
		components: {},
		data() {
			return {}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {},
		mounted() {
			// console.log('userInfo', this.userInfo);
		},
		methods: {
			async submit() {
				const res = await userLogout()
				if (res && res.code == 1) {
					Cookie.remove('LOGIN_USER_INFO')
					Cookie.remove('TOKEN')
					this.$store.commit('onChangeUserInfo', {})
					this.$router.push('/login')
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.my_page {
		min-height: 100vh;
		// height: 100%;
		// height: 100vh;
		// overflow-y: scroll; 
		// -webkit-overflow-scrolling: touch;

		.my_page_cont {
			padding: 40px 0 0;

			.card_box {
				position: relative;
				height: 112px;
				width: 100%;
				background: url('~@/assets/images/my/bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 25px 20px;
				display: flex;
				margin-bottom: 20px;

				.header_box {
					width: 60px;
					height: 60px;
					margin-right: 15px;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
						border-radius: 50%;
					}
				}

				.user_info {
					text-align: left;

					.name {
						font-size: 20px;
						color: #000;
						margin-bottom: 10px;
						font-weight: 700;
					}

					.id {
						font-size: 16px;
						color: #000;
						font-weight: 700;

						.copy {
							width: 14px;
							height: 14px;
							margin-left: 10px;
						}
					}
				}

				.more {
					position: absolute;
					top: 20px;
					right: 20px;
					width: 20px;
					height: 4px;
					background: url('~@/assets/images/my/more.png') no-repeat;
					background-size: contain;
				}
			}

			.cell_box {
				background-color: #3D3D3D;
				border-radius: 16px;
				overflow: hidden;
				margin-bottom: 20px;

				.van-cell {
					background-color: #3D3D3D;
					padding: 13px 20px;
					align-items: flex-end;

					::v-deep .van-cell__title {
						text-align: left;
						color: #fff;
					}

					::v-deep .van-cell__right-icon {
						color: #fff;
					}
				}
			}

			.submit_but {
				margin-bottom: 120px;
			}
		}
	}
</style>